<template>
  <a-drawer
    v-model:visible="visible1"
    :autofocus="autofocus"
    :body-style="bodyStyle"
    :closable="closable"
    :close-icon="closeIcon"
    :content-wrapper-style="contentWrapperStyle"
    :destroy-on-close="destroyOnClose"
    :drawer-style="drawerStyle"
    :extra="extra"
    :footer="footer"
    :footer-style="footerStyle"
    :force-render="forceRender"
    :get-container="getContainer"
    :header-style="headerStyle"
    :height="height"
    :keyboard="keyboard"
    :mask="mask"
    :mask-closable="maskClosable"
    :mask-style="maskStyle"
    :placement="placement"
    :push="push"
    :size="size"
    :style="style"
    :title="title"
    :width="width"
    :z-index="zIndex"
  >
    <template v-if="$slots.closeIcon" #closeIcon>
      <slot name="closeIcon" />
    </template>
    <template v-if="$slots.extra" #extra>
      <slot name="extra" />
    </template>
    <template v-if="$slots.footer" #footer>
      <slot name="footer" />
    </template>
    <template v-if="$slots.title" #title>
      <slot name="title" />
    </template>
    <slot />
  </a-drawer>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { Drawer } from 'ant-design-vue'
export default defineComponent({
  name: 'ZDrawer',
  components: {
    ADrawer: Drawer
  },
  props: {
    visible: {
      type: Boolean,
      default: undefined
    },
    autofocus: {
      type: Boolean,
      default: undefined
    },
    bodyStyle: {
      type: Object,
      default: undefined
    },
    closable: {
      type: Boolean,
      default: true
    },
    closeIcon: {
      type: Function,
      default: undefined
    },
    contentWrapperStyle: {
      type: Object,
      default: undefined
    },
    destroyOnClose: {
      type: Boolean,
      default: true
    },
    drawerStyle: {
      type: Object,
      default: undefined
    },
    extra: {
      type: Function,
      default: undefined
    },
    footer: {
      type: Function,
      default: undefined
    },
    footerStyle: {
      type: Object,
      default() {
        return {
          textAlign: 'right'
        }
      }
    },
    forceRender: {
      type: Boolean,
      default: false
    },
    getContainer: {
      type: [String, Function],
      default: undefined
    },
    headerStyle: {
      type: Object,
      default: undefined
    },
    height: {
      type: [String, Number],
      default: undefined
    },
    keyboard: {
      type: Boolean,
      default: true
    },
    mask: {
      type: Boolean,
      default: true
    },
    maskClosable: {
      type: Boolean,
      default: true
    },
    maskStyle: {
      type: Object,
      default: undefined
    },
    placement: {
      type: String,
      default: 'right'
    },
    push: {
      type: [Boolean, Object],
      default: undefined
    },
    size: {
      type: String,
      default: 'default'
    },
    style: {
      type: Object,
      default: undefined
    },
    title: {
      type: String,
      default: undefined
    },
    width: {
      type: [String, Number],
      default: 480
    },
    zIndex: {
      type: Number,
      default: 1000
    }
  },
  setup(props, _ref) {
    const visible1 = computed({
      get() {
        return props.visible
      },
      set(val) {
        _ref.emit('update:visible', val)
      }
    })

    const afterVisibleChange = (visible) => {
      _ref.emit('afterVisibleChange', visible)
    }

    const close = (e) => {
      _ref.emit('close', e)
    }

    return {
      visible1,
      afterVisibleChange,
      close
    }
  }
})
</script>
